<template>
    <div class="box">
        <el-button @click="add" class="jj">+</el-button>
        <div v-for="(item,i) in userList" :key="i">
            
            <p>用户</p>

            <el-input v-model="item.username" @blur="checkuser(item)"></el-input>
            <span v-if="item.isCheck">以重复</span>
            <p>昵称</p>
            <el-input v-model="item.nickname"></el-input>
              <el-select v-model="item.type" placeholder="请选择">
                  
                <el-option
                label="超级管理员"
                :value="0">
                </el-option>
                <el-option
                label="普通管理员"
                :value="1">
                </el-option>
            </el-select>
        </div>
        <el-button @click="clear" class="hy">取消</el-button>
        <el-button @click="addList" class="h">确认提交</el-button>
    </div>
</template>

<script>
    import {addUserList ,checkUser} from "@/api/user"
    const user = { 
                username:"",
               nickname:"",
               type:1,
               isCheck:false,
               password:"admin123"
            }
    export default {
        props:["onChangeVisible","onGetUserList"],
        data(){
           return {
              userList:[{...user}],
           }
        },
        methods: {
            checkuser(item){
                checkUser({username:item.username}).then(res=>{
                   item.isCheck =  res.data.length==1
                })
            },
            add(){
                this.userList.push({...user})
            },
            clear(){
                this.onChangeVisible()
                this.userList =[{...user}]
            },
            addList(){
                // console.log(this.userList,"userList")
                addUserList(this.userList).then(res=>{
                    console.log(res,"res")
                    if(res.code==200){
                        this.clear()
                        this.onGetUserList()
                    }else{
                        alert("添加失败")
                    }
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
    .box{
        >div{
            display: flex;
            padding:10px;
        }
        
    }
</style>
<style>
  .box .jj{
        margin-left: 5%;
    }
    .box{
        width: 100%;
        /* height: 300px; */
    }
    .box .hy{
        position: absolute;
        bottom: 0;
        right: 100px;
        padding: 5px;
    }
     .box .h{
        position: absolute;
        bottom: 0;
        right: 25px;
        padding: 5px;
    }
</style>